<style>
  .twy-media {
    max-width: 1440px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
  }
  .evaluation-media{
    display: flex;
    align-items: center;
    background: #F4F8FC;
  }
  .evaluation-media .all-review{
    flex: 0 0 32%;
  }
  .reviews-evaluation .be_bg {
    overflow: hidden;
    background: linear-gradient(0deg, #FBFCFE 0%, #FBFCFE 100%), #FFF;
    padding: 100px 0;
  }
  .reviews-evaluation .be_bg .reviews_evaluation{
    background-image: none;
  }
  .shopify-section.reviews-evaluation .mySwiper_media .title, 
  .reviews-evaluation .evaluation_text{
    color: #000;
  }
  .index .reviews-evaluation .swiper-pagination {
    display: block;
    bottom: 10px;
 }
 .reviews-evaluation .mySwiper-logo{
  max-width: 100%;
  background: linear-gradient(0deg, #FBFCFE 0%, #FBFCFE 100%), #FFF;
  border-radius: 0;
  padding: 0;
  top: 0;
 }
 .shopify-section .mySwiper_media .title{
  margin-top: 0;
 }
 .twy-media .swiper-pagination-bullet{
  border-radius: 3px;
  background: var(--grey-40, #CCC);
  margin: 0 5px !important;
 }
 .tenways-index .reviews-evaluation .swiper-pagination .swiper-pagination-bullet-active{
  border-radius: 3px;
  background: #010B16;
 }
 .shopify-section.reviews-evaluation .mySwiper_media .title{
  font-size: 32px;
 }
 .evaluation_text .text p {
    margin: 40px auto;
}
.reviews-evaluation .reviews_evaluation .swiper-wrapper{
  padding: 40px 0;
}
.reviews-evaluation .content1 {
    font-size: 16px;
    color: #2F80ED;
    line-height: 24px;
}
.reviews-evaluation .content2 {
  padding: 24px 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 32px;
  color: #000;
}
.media-text{
  max-width: 224px;
  margin: 0 auto;
}
.all-review .html {
    margin-bottom: 60px;
}
.riviews__buttons a{
  border: 1px solid #E6E6E6;
  background: none;
  color: #000;
}
.riviews__buttons svg{
  margin-left: 12px;
}
.riviews__buttons path{
  stroke: #000;
}
.twy-media .swiper-button-next, .twy-media .swiper-button-prev{
    z-index: 2;
    top: 20px;
    bottom: 0;
    width: 40px !important;
    height: 40px !important;
    top: 50% !important;
    border-radius: inherit;
    background: transparent;
    box-shadow: none;
    display: block;
}
.twy-media .mySwiper_media .swiper-button-next {
    right: 60px !important;
    left: auto !important;
    cursor: pointer !important;
}
.twy-media .mySwiper_media .swiper-button-prev {
    left: 60px !important;
    right: auto !important;
    cursor: pointer !important;
}
.twy-media .mySwiper_media .swiper-button-next:hover path,
.twy-media .mySwiper_media .swiper-button-prev:hover path{
  stroke: #ccc;
}
.reviews-evaluation-reward .evaluation-media .all-review {
    flex: 0 0 42%;
    max-width: 600px;
    margin: 0 auto;
}
.reviews-evaluation-reward .media-text {
    max-width: 100%;
    margin: 0 auto;
}
.reviews-evaluation-reward .content1 {
    padding-bottom: 12px; 
    color: #000;
    font-size: 36px;
    font-weight: 700;
    line-height: 48px; 
}
.reviews-evaluation-reward .content2 {
    padding-bottom: 80px; 
    color: #000;
    font-size: 36px;
    font-weight: 700;
    line-height: 48px; 
}
.reviews-evaluation-reward .riviews__buttons a {
    background: none;
    color: #2F80ED;
    border: none;
}
.shopify-section.reviews-evaluation-reward .mySwiper_media .title{
  max-width: 444px;
  margin: 40px auto 70px;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.96px;
}
.reviews-evaluation-reward.reviews-evaluation .be_bg{
  background: #F8F8F8;
}
.reviews-evaluation-reward .twy-media .swiper-button-next, 
.reviews-evaluation-reward .twy-media .swiper-button-prev{
  transform: translateY(-100%);
}
.reviews-evaluation-reward .media>img{
  filter: none;
}
.reviews-evaluation-reward .swiper-pagination .swiper-pagination-bullet-active {
    background: #000;
    width: 26px;
}
.reviews-evaluation-reward .be_bg .reviews_evaluation {
    background-image: none;
    padding-bottom: 20px;
}
.reviews-evaluation-reward .be_bg{
  padding: 70px 0;
}
.reviews-evaluation-reward .riviews__buttons path {
    stroke: #2F80ED;
}


@media screen and (max-width: 900px){
  .evaluation_text .text p{
    font-size: 14px;
  }
  .reviews-evaluation .be_bg {
    padding: 80px 0;
    border-radius: 12px;
    background: var(--light, #F4F8FC);
    margin: 0 20px;
  }
  .reviews-evaluation .mySwiper-logo{
    background: var(--light, #F4F8FC);
  }
  .evaluation-media{
    flex-wrap: wrap;
    background:none;
  }
  .evaluation-media .all-review {
      order: 1;
      flex: 1;
      padding: 40px 0;
      background: #FBFCFE;
  }
  .reviews-evaluation .twy-media .multicolumn-card .media>img {
    height: 30px;
  }
  .reviews-evaluation .content2 {
    padding: 20px 0;
    font-size: 16px;
    line-height: 24px;
 }
 .reviews-evaluation .content1 {
    font-size: 14px;
    line-height: 24px;
}
.all-review .html {
    margin-bottom: 20px;
}
.all-review .html svg{
  height: 16px;
}
.shopify-section.reviews-evaluation .mySwiper_media .title {
    font-size: 18px;
    line-height: 26px;
}
.reviews-evaluation-reward .evaluation_text .text p {
    margin: 20px auto;
}
  .reviews-evaluation-reward .all-review svg{
    height: 118px;
    width: auto;
  }
  .reviews-evaluation-reward .evaluation-media{
     background: #F9FCFF;
  }
  .reviews-evaluation-reward .be_bg {
    padding: 40px 0;
    border-radius: 0;
    background: #F8F8F8;
    margin: 0;
  }
  .shopify-section.reviews-evaluation-reward .mySwiper_media .title {
    max-width: 100%;
    margin: 0 auto;
  }
  .reviews-evaluation-reward .riviews__buttons a {
    font-size: 14px;
    line-height: 24px;
 }
  .reviews-evaluation-reward .content1,
  .reviews-evaluation-reward .content2{
    font-size: 24px;
    line-height: 32px;
 }
 .reviews-evaluation-reward.twy-media .multicolumn-card .media>img {
    height: 20px;
 }
}

</style>

<div class="twy-media">
     <div class="mySwiper_media swiper-father">
         <div class="evaluation-media">
          <div class="block-media be_bg">
            {% if section.settings.content1 != blank %}
               <div class="text content1">{{  section.settings.content1 }}</div>
             {% endif %}
            {%- if section.settings.button_label != blank -%}
            <div class="riviews__buttons">
              <a{% if section.settings.link %} href="{{ section.settings.link }}"{% else %} role="link" aria-disabled="true"{% endif %} class="{% if section.settings.button_style_secondary %}button--secondary{% else %}button--primary{% endif %}">{{ section.settings.button_label | escape }}{% render 'icon-explore' %}</a>
            </div>
          {%- endif -%}
            <div thumbsSlider class="swiper mySwiper-logo">
              <div class="swiper-wrapper">              
                  {%- for block in section.blocks -%}
                    {% case block.type %}
                    {%- when 'logo' -%}
                      <div class="swiper-slide">
                        <div class="multicolumn-card">
                        <div class="image-with-text__media image-with-text__media--{{ block.settings.height }} {% if block.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}">
                        {%- if block.settings.image != blank -%}
                          <img
                            srcset="{%- if block.settings.image.width >= 165 -%}{{ block.settings.image | img_url: '165x' }} 165w,{%- endif -%}
                              {%- if block.settings.image.width >= 323 -%}{{ block.settings.image | img_url: '323x' }} 323w,{%- endif -%}
                              {%- if block.settings.image.width >= 360 -%}{{ block.settings.image | img_url: '360x' }} 360w,{%- endif -%}
                              {%- if block.settings.image.width >= 535 -%}{{ block.settings.image | img_url: '535x' }} 535w,{%- endif -%}
                              {%- if block.settings.image.width >= 750 -%}{{ block.settings.image | img_url: '750x' }} 750w,{%- endif -%}
                              {%- if block.settings.image.width >= 1070 -%}{{ block.settings.image | img_url: '1070x' }} 1070w,{%- endif -%}
                              {%- if block.settings.image.width >= 1500 -%}{{ block.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
                              {{ block.settings.image | img_url: 'master' }} {{ block.settings.image.width }}w"
                            data-src="{{ block.settings.image | img_url: '1500x' }}"
                            sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
                            alt="{{ block.settings.image.alt | escape }}"
                            loading="lazy"
                            class="loadlazy"
                            width="{{ block.settings.image.width }}"
                            height="{{ block.settings.image.height }}"
                          >
                        {%- else -%}
                          {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                        {%- endif -%}
                      </div>
                      </div>
                      </div>
                    {%- endcase -%}
                  {%- endfor -%}            
              </div>
            </div>
            <div class="swiper reviews_evaluation">
              <div class="swiper-wrapper">
                  {%- for block in section.blocks -%}
                    {% case block.type %}
                    {%- when 'text' -%}
                    <div class="swiper-slide" {{ block.shopify_attributes }}>
                    <div class="evaluation_text" data-swiper-parallax="-300">
                       
                        {% if block.settings.title %}
                           <div class="title">
                              {{ block.settings.title }}
                           </div>
                        {% endif %}
                        {% if block.settings.text %}
                           <div class="text">
                              {{ block.settings.text }}
                           </div>
                        {% endif %}
                    </div>
                    <div class="multicolumn-card">
                      <div class="image-with-text__media image-with-text__media--{{ block.settings.height }} {% if block.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}">
                      {%- if block.settings.image != blank -%}
                        <img
                          srcset="{%- if block.settings.image.width >= 165 -%}{{ block.settings.image | img_url: '165x' }} 165w,{%- endif -%}
                            {%- if block.settings.image.width >= 323 -%}{{ block.settings.image | img_url: '323x' }} 323w,{%- endif -%}
                            {%- if block.settings.image.width >= 360 -%}{{ block.settings.image | img_url: '360x' }} 360w,{%- endif -%}
                            {%- if block.settings.image.width >= 535 -%}{{ block.settings.image | img_url: '535x' }} 535w,{%- endif -%}
                            {%- if block.settings.image.width >= 750 -%}{{ block.settings.image | img_url: '750x' }} 750w,{%- endif -%}
                            {%- if block.settings.image.width >= 1070 -%}{{ block.settings.image | img_url: '1070x' }} 1070w,{%- endif -%}
                            {%- if block.settings.image.width >= 1500 -%}{{ block.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
                            {{ block.settings.image | img_url: 'master' }} {{ block.settings.image.width }}w"
                          data-src="{{ block.settings.image | img_url: '1500x' }}"
                          sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
                          alt="{{ block.settings.image.alt | escape }}"
                          loading="lazy"
                          class="loadlazy"
                          width="{{ block.settings.image.width }}"
                          height="{{ block.settings.image.height }}"
                        >
                      {%- else -%}
                        {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                      {%- endif -%}
                      </div>
                    </div>
                   </div>
                 {%- endcase -%}
                {%- endfor -%}
              </div>
              <div class="swiper-pagination me"></div>
              <div class="swiper-button-next me">{% render 'swiper-button-next' %}</div>
              <div class="swiper-button-prev me">{% render 'swiper-button-prev' %}</div> 
           </div>
          </div>
            <div class="block-media all-review">
              <div class="media-text">
                {% if section.settings.content2 != blank %}
                  <div class="text content2">{{  section.settings.content2 }}</div>
                {% endif %}
                {% if section.settings.reward_600 != blank %}
                  <span>{{ section.settings.reward_600 }}</span>
                {% else %}
                 <span> {% render 'reward-all' %} </span>
                {% endif %}
              </div>
            </div>          
         </div>    
     </div>
 </div>

 <script>
  var swiper = new Swiper(".mySwiper-logo", {
    slidesPerView: 1,
    loop: true,
    spaceBetween: 0,
    freeMode: true,
    watchSlidesProgress: true,
    watchSlidesVisibility: true,
    breakpoints: {
      460: {
        slidesPerView: 1,
        loop:true,
        slidesOffsetBefore : 100,
      },
      768: {
        slidesPerView: 3,
        loop:true,
        slidesOffsetBefore : 100,
      },
       990: {
        slidesPerView: 3,
        slidesOffsetBefore : 100,
        loop:true,
      },
      1200: {
        slidesPerView: 5,
        loop:true,
      },
      1440: {
        slidesPerView: 5,
        loop:true,
      }
    }
  });
  var swiper2 = new Swiper(".reviews_evaluation", {
    loop: true,
    spaceBetween: 10,
    centeredSlides : true,
    watchSlidesVisibility: true,
    navigation: {
      nextEl: ".swiper-button-next.me",
      prevEl: ".swiper-button-prev.me",
    },
    pagination: {
      el: ".swiper-pagination.me",
    },
    thumbs: {
      swiper: swiper,
      autoScrollOffset: 1,
      watchSlidesVisibility: true,
    },
  });
</script>

 
{% schema %}
  {
    "name": "Reviews evaluation reward",
    "class": "spaced-section spaced-section--full-width reviews-evaluation reviews-evaluation-reward",
    "tag": "section",
    "settings": [
     {
         "type": "text",
         "id": "content1",
         "label": "Content1"
      },
      {
         "type": "text",
         "id": "content2",
         "label": "Content2"
      },
      {
         "type": "html",
         "id": "reward_600",
         "label": "reward 600"
      },
     {
       "type": "text",
       "id": "button_label",
       "default": "Button label",
       "label": "Button label",
       "info": "Button label"
     },
     {
       "type": "url",
       "id": "link",
       "label": "link"
     }
    ],
    "blocks": [
    {
      "type": "text",
      "name": "text",
      "settings": [
        {
          "type": "html",
          "id": "html",
          "label": "Star media"
        },
        {
          "type": "text",
          "id": "title",
          "default": "Column",
          "label": "Column"
        },
        {
          "type": "richtext",
          "id": "text",
          "label": "Des"
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": "image"
        }
      ]
     },
     {
       "type": "logo",
       "name": "logo",
       "settings": [
         {
          "type": "image_picker",
          "id": "image",
          "label": "image"
        }
      ]
     }
    ],
    "presets": [
      {
        "name": "Reviews evaluation reward"
      }
    ]
  }
  {% endschema %}
  